<template>
  <div class="home">
        <Header head-title="绑定健康卡" go-back="true"></Header>
        <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true" class="Card">
            <el-tab-pane label="主卡" name="first">
                <h3 class="cardTitle">选择标签</h3>
                <section class="label Select borderR" v-for="(item, index) in labels" :key="index" @click="Label(index, item.value)" :class="[label == index ? 'labelActive' : '']">
                    <img class="cardimg" v-if="label == index" src="../../assets/img/right.png" alt="">
                    <p class="fontsMin cardname">
                        {{ item.name }}
                    </p>
                </section>
                <h3 class="cardTitle">填写申请人信息</h3>
                <section class="Select CardApply">
                    <p class="fonts">姓名</p>
                    <input type="text" class="Back_input" placeholder="请输入持卡人真实姓名" v-model.lazy="cardholderName">
                </section>
                <section class="Select CardApply">
                    <p class="fonts">卡面号</p>
                    <input type="tel" class="Back_input" placeholder="请输入卡面号" v-model.lazy="cardNum">
                </section>
                <section class="Select CardApply">
                    <p class="fonts">手机号</p>
                    <input type="tel" class="Back_input" placeholder="请输入持卡人手机号" v-model.lazy="phone">
                    <button class="GetCode" @click="getCode">{{text}}</button>
                </section>
                <section class="Select CardApply">
                    <p class="fonts">验证码</p>
                    <input type="tel"  v-model.lazy="code" class="Back_input" placeholder="请输入持卡人验证码">
                </section>
                <el-button type="primary" class="Login"  @click="submit">确认提交</el-button>
            </el-tab-pane>
            <el-tab-pane label="副卡" name="second">
                <h3 class="cardTitle">选择标签</h3>
                <section class="label Select borderR" v-for="(item, index) in labelsZ" :key="index" @click="LabelZ(index, item.value)" :class="[labelZ == index ? 'labelActive' : '']">
                    <img class="cardimg" v-if="labelZ == index" src="../../assets/img/right.png" alt="">
                    <p class="fontsMin cardname">
                        {{ item.name }}
                    </p>
                </section>
                <h3 class="cardTitle">填写申请人信息</h3>
                <section class="Select CardApply">
                    <p class="fonts">姓名</p>
                    <input type="text" class="Back_input" placeholder="请输入持卡人真实姓名" v-model.lazy="cardholderName">
                </section>
                <section class="Select CardApply">
                    <p class="fonts">身份证号</p>
                    <input type="tel" class="Back_input" placeholder="请输入持卡人身份证号" v-model.lazy="idNo">
                </section>
                <section class="Select CardApply">
                  <p class="fonts">手机号</p>
                  <input type="tel" class="Back_input" placeholder="请输入持卡人手机号" v-model.lazy="phone">
                  <button class="GetCode" @click="getCode">{{text}}</button>
                </section>
                <section class="Select CardApply">
                    <p class="fonts">验证码</p>
                    <input type="tel" class="Back_input" placeholder="请输入持卡人验证码" v-model.lazy="code">
                </section>
                <el-button type="primary" class="Login" @click="submit">确认提交</el-button>
            </el-tab-pane>
        </el-tabs>

  </div>
</template>

<script>
import Header from '../../components/Header'
import { Toast } from 'mint-ui'
import cardApi from '@/api/card'
import ssoApi from '@/api/sso'

export default {
  data () {
    return {
      time: 60,
      text: '获取验证码',
      dis: false,
      index: 0,
      activeName: 'first',
      activeIndex: '1',
      label: 0,
      labels: [
        { name: '本人', value: '6' },
        { name: '父母', value: '1' },
        { name: '子女', value: '2' },
        { name: '配偶', value: '4' },
        { name: '其他', value: '7' }
      ],
      labelZ: -1,
      labelsZ: [
        { name: '父母', value: '1' },
        { name: '子女', value: '2' },
        { name: '配偶', value: '4' },
        { name: '本人', value: '6' },
        { name: '其他', value: '7' }
      ],
      cardholderName: '',
      cardNum: '',
      idNo: '',
      phone: '',
      code: ''
    }
  },
  components: {
    Header
  },
  methods: {
    getCode () {
      // 校验手机号
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        Toast('请输入正确的手机号')
        return
      }
      // 验证码时间控制60秒后重发
      let time = this.time
      const sel = setInterval(() => {
        time--
        // console.log(time)
        const text = time + '秒重新发送'
        this.time = time
        this.text = text
        this.dis = true
        if (time === 0) {
          clearInterval(sel)
          this.time = 60
          this.text = '获取验证码'
          this.dis = false
        }
      }, 1000)
      // const url = 'sso/authCode?mobile=' + this.phone
      // this.$axios({
      //   method: 'post',
      //   url: url
      // })
      ssoApi.getCode(this.phone).then(response => {
        console.log(response)
      })
      // console.log(res)
    },
    handleClick (tab, event) {
       console.log(tab, event)
    },
    Label (index, value) {
      // console.log(index, value)
      this.label = index
    },
    LabelZ (index, value) {
      this.labelZ = index
    },
    submit () {
      // console.log(this.phone, this.code)
      if (this.cardholderName === '') {
        Toast('请输入持卡人姓名')
        return
      }
      if(this.activeName === 'first') {
        if (this.cardNum === '') {
          Toast('请输入卡面号')
          return
        }
      } else {
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.idNo)) {
          Toast('请输入有效的身份证号')
          return
        }
      }

      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        Toast('请输入正确的手机号')
        return
      }

      ssoApi.validCode(this.phone, this.code).then(response => {
        console.log(response)
        if (response.code !== 200) {
          // 验证验证码失败
          Toast('请输入正确的验证码')
          return
        }
        const card = {
          cardType: this.label,
          cardNo: this.cardNum,
          gender: '1',
          idNo: this.idNo,
          name: this.cardholderName,
          phone: this.phone,
          seqNo: ''
        }
        cardApi.bindCard(card).then(response => {
          this.$router.push({ path: '/' })
        })
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>
.home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 0.4rem;
    background: #fff;
    padding-top: 1rem;
    overflow-y: auto;
}
</style>
